<template>
	<view class="create">
		<view class="formsBox">
			<uni-forms ref="form" :modelValue="formData" :label-width="100" :rules="rules">
				<uni-forms-item label="加班申请人" name="applicant">
					<uni-easyinput type="text" v-model="formData.applicant" placeholder="请输入姓名" disabled />
				</uni-forms-item>
				<uni-forms-item label="加班类型" name="type">
					<uni-data-select
						:disabled="!!processId"
					    v-model="formData.type"
					    :localdata="overtimeType"
						placeholder="请选择加班类型"
					></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="选择加班成员" name="usersId">
					<userMultiple v-model="formData.usersId" :disabled="!!processId" />
				</uni-forms-item>
				<view class="itemBox" v-for="(items, index) in formData.timeJson" :key="index">
					<u-divider text="分割线" v-if="index==0"></u-divider>
					<uni-forms-item label="加班开始时间" :name="['timeJson',index,'startTime']" :rules="[{'required': true,errorMessage: '加班开始时间必填'}]">
						<uni-datetime-picker :disabled="!!processId" type="datetime" v-model="items.startTime" return-type="timestamp" placeholder="请选择加班开始时间" />
					</uni-forms-item>
					<uni-forms-item label="加班结束时间" :name="['timeJson',index,'endTime']" :rules="[{'required': true,errorMessage: '加班结束时间必填'}]">
						<uni-datetime-picker :disabled="!!processId" type="datetime" v-model="items.endTime" return-type="timestamp" placeholder="请选择加班结束时间" />
					</uni-forms-item>
					<uni-forms-item label="是否法定节假日" :name="['timeJson',index,'isHoliday']" :rules="[{'required': true,errorMessage: '是否法定节假日必填'}]">
						<uni-data-select
						    v-model="items.isHoliday"
						    :localdata="holidayStatus"
							placeholder="请选择是否法定节假日"
							:disabled="true"
						></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="加班小时数" :name="['timeJson',index,'overTimeNum']" :rules="[{'required': true,errorMessage: '加班小时数必填'}]">
						<uni-easyinput :disabled="!!processId" type="number" v-model="items.overTimeNum"  placeholder="请输入加班小时数" @input="overTimeNumInput" />
					</uni-forms-item>
					<view class="btnBoxs" v-if="!processId">
						<u-button class="button" v-if="index == formData.timeJson.length-1" type="primary" :plain="true" text="新增" size="small" @click="clickAdd" style="width: 160rpx;"></u-button>
						<u-button class="button" v-if="index != 0" type="error" :plain="true" text="删除" size="small" @click="clickdel(index)" style="width: 160rpx;"></u-button>
					</view>
					<u-divider text="分割线"></u-divider>
				</view>
				<uni-forms-item label="加班小时合计" name="day">
					<uni-easyinput disabled type="number" v-model="formData.day"  placeholder="请输入加班小时合计" />
				</uni-forms-item>
				<uni-forms-item label="加班理由" name="reason">
					<uni-easyinput :disabled="!!processId" type="textarea" autoHeight v-model="formData.reason" placeholder="请输入加班理由"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="消假相关文件上传" name="files">
					<uploadFile v-model="formData.files" :disabled="!!processId" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="buttonBox" v-if="!processId">
			<button class="button" @click="submit" type="primary">提交</button>
		</view>
	</view>
</template>

<script>
	import bindingPersonnel from '@/components/user/bindingPersonnel.vue'
	import uploadFile from '@/components/common/uploadFile.vue'
	import userMultiple from '@/components/user/userMultiple.vue'
	import {getIntDictOptions} from '@/utils/auth.js'
	import {createOaOvertime} from '@/api/oa/overtime/index.js'
	import {useVacation} from '@/api/user/userApi.js'
	import {httpStrToArr} from '@/utils/common.js'
	export default {
		components:{
			bindingPersonnel,
			uploadFile,
			userMultiple
		},
		props:{
			processId:'',
			propFromData:{}
		},
		watch:{
			propFromData(val){
				let formData = JSON.parse(JSON.stringify(val))
				formData.timeJson = JSON.parse(formData.timeJson)
				formData.usersId = JSON.parse(formData.usersId)
				formData.type = String(formData.type)
				formData.files = httpStrToArr(formData.files)
				this.formData = formData;
				// this.leaveIdInfo = val.bpmOALeaveRespVO;
			},
		},
		data() {
			return {
				formData:{
					applicant:this.$store.state.user.name,
					type:'',
					timeJson:[
						{
							startTime:'',
							endTime:'',
							isHoliday:'',
							overTimeNum:'',
						}
					],
					day:0,
					reason:'',
					files:[],
					usersId:[],
				},
				// 加班类型
				overtimeType:[],
				// 是否法定节假日
				holidayStatus:[],
				remaining:0,
				rules: {
					applicant: {
						rules: [{
							required: true,
							errorMessage: '请输入请假申请人',
						}]
					},
					leaveId:{
						rules: [{
							required: true,
							errorMessage: '请选择请假申请单',
						}]
					},
					usersId: {
						rules: [{
							required: true,
							errorMessage: '请选择加班成员',
						}]
					},
					startTime: {
						rules: [{
							required: true,
							errorMessage: '请选择请假开始时间',
						}]
					},
					endTime: {
						rules: [{
							required: true,
							errorMessage: '请选择请假结束时间',
						}]
					},
					type: {
						rules: [{
							required: true,
							errorMessage: '请选择请假类型',
						}]
					},
					day: {
						rules: [{
							required: true,
							errorMessage: '请输入请假天数',
						}]
					},
					reason: {
						rules: [{
							required: true,
							errorMessage: '请输入请假理由',
						}]
					},
				},
				// 选中的请假申请单
				leaveIdInfo:{},
			};
		},
		methods:{
			// 点击提交
			submit(){
				uni.showLoading()
				this.$refs.form.validate().then(async res => {
					try{
						let formData = JSON.parse(JSON.stringify(this.formData));
						formData.timeJson = JSON.stringify(formData.timeJson)
						let {usersId,...newFormData} = formData;
						let newUsersId = usersId.map(item=>{
							return {
								userId:item.id,
								userName:item.name
							}
						});
						newFormData.usersId = JSON.stringify(newUsersId)
						let info = await createOaOvertime(newFormData);
						console.log(info)
						uni.hideLoading()
						uni.showToast({
							title:'发起成功',
							icon:'none',
							success: () => {
								setTimeout(()=>{
									uni.redirectTo({
										url:'/pages/process/overtime/index'
									})
								},1500)
							}
						})
					}catch(err){
						console.log(err)
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log('表单错误信息：', err);
				})
			},
			
			// 点击新增加班块
			clickAdd(){
				let obj = {
					startTime:'',
					endTime:'',
					isHoliday:'',
					overTimeNum:'',
				};
				this.formData.timeJson.push(obj)
			},
			// 点击删除加班块
			clickdel(index){
				this.formData.timeJson.splice(index,1)
			},
			// 加班小时数改变
			overTimeNumInput(){
				setTimeout(()=>{
					console.log(this.formData.timeJson)
					let number = 0;
					this.formData.timeJson.forEach(item=>{
						console.log(item)
						console.log(item.overTimeNum)
						number = number + Number(item.overTimeNum)
					});
					console.log(number)
					this.formData.day = number
				})
			},
		},
		async onShow() {
			this.overtimeType = await getIntDictOptions('oa_overtime_type');
			this.holidayStatus = await getIntDictOptions('oa_holiday_status');
			console.log(this.overtimeType)
			console.log(this.holidayStatus)
		},
		async mounted() {
			this.overtimeType = await getIntDictOptions('oa_overtime_type');
			this.holidayStatus = await getIntDictOptions('oa_holiday_status');
		}
	}
</script>

<style lang="less" scoped>
.create{
	width: 100%;
	height: auto;
	padding-top: 20rpx;
	.formsBox{
		width: 100%;
		height: auto;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		.uni-forms-item{
			margin-bottom: 30rpx;
		}
		.itemBox{
			.btnBoxs{
				display: flex;
				align-items: center;
			}
		}
	}
	.buttonBox{
		width: 100%;
		height: auto;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-top: 40rpx;
	}
}
</style>
